<template>
  <el-card>
    <div slot="header">
      <h3>批量修改销售区域-单据查看</h3>
    </div>
    <div v-loading="pageLoading">
      <ViewHeader :supply-info-vo="supplyInfoVo" />
      <el-divider />
      <!-- 发起原因输入框 -->
      <LaunchReasonInput isDisabled :reason.sync="recordInfoVo.launchReason" />
      <el-tabs v-model="tabs.current">
        <el-tab-pane label="商品信息" :name="tabs.values.ProductInfo" />
        <el-tab-pane label="进价信息" :name="tabs.values.PurchaseInfo" />
      </el-tabs>
      <transition name="el-fade-in-linear">
        <ProductInfo
          v-show="tabs.current == tabs.values.ProductInfo"
          :sku-info-vos="skuInfoVos"
        />
      </transition>
      <transition name="el-fade-in-linear">
        <PurchaseInfo
          v-show="tabs.current == tabs.values.PurchaseInfo"
          :is-purchase-multi-unit="isPurchaseMultiUnit"
          :area-info-vos="supplySkuAreaInfoVos"
          :price-info-vos="supplySkuPriceInfoVos"
        />
      </transition>
      <FooterFields :fields-data="recordInfoVo" :fields-items="fieldsItems" />
    </div>
  </el-card>
</template>
<script>
import ViewHeader from '../saleAreaAdd/Header/view';
import LaunchReasonInput from '@/components/LaunchReasonInput';
import ProductInfo from '../saleAreaAdd/ProductInfo/view';
import PurchaseInfo from './PurchaseInfo/view';
import FooterFields from '@/pages/commodity/components/FooterFields/DataRender';
import { TABS_OPTIONS, TABS_VALUES, FOOTER_ITEMS } from '../saleAreaAdd/constants';
import { getProductSupplySaleAreaSkuRecordVoService } from '@/api/commodity/commodityInfoEdit/saleAreaAdd';
export default {
  components: {
    ViewHeader,
    LaunchReasonInput,
    ProductInfo,
    PurchaseInfo,
    FooterFields
  },
  data () {
    return {
      pageLoading: false, // 页面loading
      tabs: {
        current: TABS_VALUES.ProductInfo,
        list: TABS_OPTIONS,
        values: TABS_VALUES
      },
      isPurchaseMultiUnit: '', // 是单计量或多计量类型
      supplyInfoVo: {}, // 供应商信息
      skuInfoVos: [], // 商品信息集合
      supplySkuAreaInfoVos: [], // 参照城市集合
      supplySkuPriceInfoVos: [], // 进价信息集合
      recordInfoVo: {}, // 单据字段
      fieldsItems: FOOTER_ITEMS
    }
  },
  mounted () {
    this.loadPageDetailsData()
  },
  methods: {
    // 加载页面详情数据
    async loadPageDetailsData () {
      const data = { recordNo: this.$route?.query?.recordNo }
      const loadingFn = state => { this.pageLoading = state }
      const res = await getProductSupplySaleAreaSkuRecordVoService(data, loadingFn)
      this.setPageDetails(res?.retData ?? {})
      this.updateFooterItems()
    },
    // 设置页面详情数据
    setPageDetails (detailsVo) {
      this.isPurchaseMultiUnit = detailsVo?.isPurchaseMultiUnit ?? ''
      this.supplyInfoVo = detailsVo?.supplyInfoVo ?? {}
      this.skuInfoVos = detailsVo?.skuInfoVos ?? []
      this.supplySkuAreaInfoVos = detailsVo?.supplySkuAreaInfoVos ?? []
      this.supplySkuPriceInfoVos = detailsVo?.supplySkuPriceInfoVos ?? []
      this.recordInfoVo = detailsVo?.recordInfoVo ?? {}
    },
    // 更新表尾字段渲染项集合
    updateFooterItems () {
      if (this.recordInfoVo?.commitState == 'FAIL') {
        this.fieldsItems = [...FOOTER_ITEMS, { prop: 'reason', label: '审核失败原因：' }]
      } else {
        this.fieldsItems = [...FOOTER_ITEMS]
      }
    }
  }
}
</script>
<style lang="less" scoped>
/deep/ .el-divider--horizontal {
  margin: 15px 0;
}
.el-fade-in-linear-enter-active,
.el-fade-in-linear-leave-active {
  transition: opacity 0.3s ease;
}

.el-fade-in-linear-enter,
.el-fade-in-linear-leave-to {
  opacity: 0;
}
</style>
